<!DOCtype>
<html>
<head>
<title>闲人聚会-行走在时光中的闲人，想找个聚集地</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="php，技术博客，生活博客">
<meta name="robots" content="index">
<meta name="author" content="464171544@qq.com">
<meta name="keywords" content="php博客，new一个对象，博客，php，闲人聚会，技术博客">
<link rel="stylesheet" href="/static/css/music.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1027443_kt9ehsvrtze.css">
<link rel="stylesheet" href="/static/element/index.css">
</head>
<body>
<div id="box" v-cloak>
	<!--回到顶部  -->
	<div :class="top_show ? 'to-top' : 'to-top to-top-hide'" @click="toTop(0);">
		<i class="el-icon-arrow-up"></i>
	</div>
	<!--蒙版  -->
	<div class="bg-div"></div>
	<!--左侧菜单栏  -->
	<div :class="bar_show ? 'left-content left-content-show' : 'left-content left-content-hide'">
		<!--博客名称  -->
		<h1 class="blog-name">闲人聚会</h1>
		<!--博客菜单  -->
		<ul class="blog-menu">
			<li @click="linkMenu(key,item.href);" v-for = "(item,key) in menus" :class="menu_index == key ? 'menu-active' : ''">
				{{item.name}}<span class="eng-menu">{{item.eng}}</span>
			</li>
		</ul>
		<!--标签库  -->
		<ul class="badge-list">
			<li v-for="item in list.badges">
				<a href="###" @click="searchArticle(item.id)" class="badge-link">{{item.name}}</a>
			</li>
		</ul>
	</div>
	<!--右侧内容  -->
	<div :class="bar_show ? 'right-content right-content-small' : 'right-content right-content-big'">
		<!--menu按钮  -->
		<el-button type="danger" :class="bar_show ? 'menu-bar menu-bar-show' : 'menu-bar menu-bar-hide'" size="mini" :icon="bar_show ? 'iconfont icon-guanbi' : 'iconfont icon-bars'" @click.stop="setLeftBar()"></el-button>
		<!--头部首页  -->
		<div class="user-header" id="tops">
			<div class="bloger-info">
				<div class="bloger-header-box">
					<img src="https://www.gsmjb.com//upload/headurl2019/01/26/190126145201341.jpeg" class="bloger-header">
				</div>
				<div class="bloger-name">{{list.bloger.eng_name}} | {{list.bloger.user_name}}</div>
				<div class="bloger-badge">{{list.bloger.badge}}</div>
				<div class="bloger-brief">{{list.bloger.brief}}</div>
				<ul class="bloger-contact">
					<li><i class="iconfont icon-facebookfacebook51"></i></li>
					<li><i class="iconfont icon-twitter"></i></li>
					<li><i class="iconfont icon-google"></i></li>
					<li><i class="iconfont icon-linkedin1"></i></li>
					<li><i class="iconfont icon-pinterestpinterest31"></i></li>
				</ul>
			</div>
		</div>
		<!--心情  -->
		<div class="bloger-body" id="badgess">
			<div class="model-title">
				<div class="model-title-name">
					**<span class="model-title-content">心情分享</span>**
				</div>
				<div class="model-title-brief">
					也许别人给得了你安慰，也给的了劝慰告诫，却永远不知道你心底是多么的万箭穿心。所以不论有多少的委屈，多么的难受，记得最终能治愈自己的还是自己。
				</div>
			</div>
			<div class="bloger-content">
				<ul class="head-line">
					<li>
						<img src="/static/images/mood1.jpg" class="head-cover">
						<div class="head-body"></div>
					</li>
					<li>
						<img src="/static/images/mood2.jpg" class="head-cover">
						<div class="head-body"></div>
					</li>
					<li>
						<img src="/static/images/mood3.jpg" class="head-cover">
						<div class="head-body"></div>
					</li>
					<li>
						<img src="/static/images/mood4.jpg" class="head-cover">
						<div class="head-body"></div>
					</li>
					<li>
						<img src="/static/images/mood5.jpg" class="head-cover">
						<div class="head-body"></div>
					</li>
					<li>
						<img src="/static/images/mood6.jpg" class="head-cover">
						<div class="head-body"></div>
					</li>
					<li>
						<img src="/static/images/mood7.jpg" class="head-cover">
						<div class="head-body"></div>
					</li>
					<li>
						<img src="/static/images/mood8.jpg" class="head-cover">
						<div class="head-body"></div>
					</li>
				</ul>
			</div>
		</div>
		<!--标签库  -->
		<div class="bloger-body" id="badgess">
			<div class="model-title">
				<div class="model-title-name">
					**<span class="model-title-content">标签库</span>**
				</div>
				<div class="model-title-brief">
					很多时候，一种习惯，继续习惯后，便什么也不是了，有的人，只想继续这种习惯，更多人，被另一种新鲜所吸引。总是要到说再见，才会想起从前。
				</div>
			</div>
			<div class="bloger-content">
				<ul class="badge-list">
					<li @click="searchArticle(0)" :class="badge_show ? 'badges-item badges-item-animate' : 'badges-item'">全部</li>
					<li @click="searchArticle(item.id)" v-for = "item in list.badges" :class="badge_show ? 'badges-item badges-item-animate' : 'badges-item'">{{item.name}}</li>
				</ul>
			</div>
		</div>
		<!--文章列表  -->
		<div class="bloger-body" id="acticle">
			<div class="model-title">
				<div class="model-title-name">
					**<span class="model-title-content">文章列表</span>**
				</div>
				<div class="model-title-brief">
					孤村三两人家住，终日对野叟田父。说今朝绿水平桥，昨日溪南新雨。
				</div>
			</div>
			<div class="bloger-content">
				<div v-if="list.article.data.length > 0" v-loading="article_load" element-loading-text="正在加载数据">
					<ul :class="article_show ? 'article-list article-list-show' : 'article-list'" >
						<li v-for = "item in list.article.data" @click="seeArticle(item.id)">
							<div class="article-body-box">
								<div class="artcle-cover-box">
									<img :src="item.cover" class="article-cover">
								</div>
								<div class="article-content">
									<h4 class="article-title">{{item.title}}</h4>
									<div class="article-info">{{item.content}}</div>
								</div>
							</div>
							<div class="article-footer">
								<span class="article-badge">
									<i class="iconfont icon-biaoqian2"></i>{{item.badge_name}}
								</span>
								<span class="article-time">
									<i class="iconfont icon-shizhong1"></i>{{item.create_time}}
								</span>
								<span class="article-seenum">
									<i class="iconfont icon-liulan"></i>浏览 （{{item.see_num}}）
								</span>
								<a class="article-reader" href="###" @click.stop="seeArticle(item.id)">阅读全文</a>
							</div>
						</li>
					</ul>
					<div class="article-more">
						<el-button size="mini" @click="handleSizeChange()" :loading="btn_load" :disabled="btn_dis">{{more_text}}</el-button>
					</div>
				</div>
				<div v-else class="empty-article"  v-loading="article_load" element-loading-text="正在加载数据">
					暂无文章数据
				</div>
			</div>
		</div>
		<!--给我留言  -->
		<div class="contact" id="to-contact">
			<div class="contact-body">
				<div class="contact-title">给我留言</div>
				<div class="contact-brief">如果你有什么需要，或者你有什么想说的可以给我留言，我会尽我的能力来更新博客内容,然后大家一起学习，一起分享我们年轻的生活</div>
				<div class="contact-content">
					<el-form class="contact-info" ref = "message" :model = "message" :rules="rules">
						<el-form-item prop="user_name">
							<el-input type="text" v-model="message.user_name" placeholder="请输入姓名"></el-input>
						</el-form-item>
						<el-form-item prop="email">
							<el-input type="text"  v-model="message.email" placeholder="请输入邮箱"></el-input>
						</el-form-item>
						<el-form-item prop="content">
							<el-input type="textarea" :rows="6" v-model="message.content" placeholder="请输入内容"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button class="contact-submit" type="danger" @click="submit('message')">提交留言</el-button>
						</el-form-item>
					</el-form>
					<div class="contact-addr">
						<h3>联系方式</h3>
						<hr>
						<div class="contact-addr-item">
							<i class="iconfont icon-iconfontdianhua3"></i>
							<span>15511112222</span>
						</div>
						<div class="contact-addr-item">
							<i class="iconfont icon-youjian-yuanshijituantubiao"></i>
							<span>464171544@qq.com</span>
						</div>
						<div class="contact-addr-item">
							<i class="iconfont icon-qq"></i>
							<span>464171544</span>
						</div>
						<div class="contact-addr-item">
							<i class="iconfont icon-shouye"></i>
							<span>安徽省合肥市瑶海区*************</span>
						</div>
						<ul class="bloger-contact">
							<li class="bloger-contact-bottom"><i class="iconfont icon-facebookfacebook51"></i></li>
							<li class="bloger-contact-bottom"><i class="iconfont icon-twitter"></i></li>
							<li class="bloger-contact-bottom"><i class="iconfont icon-google"></i></li>
							<li class="bloger-contact-bottom"><i class="iconfont icon-linkedin1"></i></li>
							<li class="bloger-contact-bottom"><i class="iconfont icon-pinterestpinterest31"></i></li>
						</ul>
					</div>
				</div>
				<div class="footer">
					Copyright © www.gsmjb.com All Rights Reserved. 备案号：皖ICP备19000759号
				</div>
			</div>
		</div>
	</div>
</div>
<script src="/static/js/vue.js"></script>
<script src="/static/js/jquery.js"></script>
<script src="/static/element/index.js"></script>
<script src="/static/js/common.js"></script>
<script>
new Vue({
	el : '#box',
	data:{
		bar_show : false,
		menu_index : 0,
		menus : [
			{
				name : '首页',
				eng : '(HOME)',
				href : 'tops'
			},
			{
				name : '文章',
				eng : '(ARTICLE)',
				href : 'acticle'
			},
			{
				name : '留言',
				eng : '(CONTACT)',
				href : 'to-contact'
			},
		],
		list : {$list | raw},
		article_show : false,
		badge_show : false,
		top_show : false,
		article_load : false,
		badge_id : '',
		message : {
			user_name : window.localStorage.getItem('msg-user'),
			email : window.localStorage.getItem('msg-email'),
			content : ''
		},
		rules : {
			user_name : [
				{ required: true, message: '请输入姓名', trigger: 'blur' },
				{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
			],
			email : [
				{ required: true, message: '请输入邮箱', trigger: 'blur' },
				{ type:'email', message: '格式不正确', trigger: 'blur' }
			],
			content : [
				{ required: true, message: '请输入内容', trigger: 'blur' },
				{ min: 10, max: 255, message: '长度在10 到 255 个字符', trigger: 'blur' }
			],
		},
		barrage_index : 0,
		btn_load : false,
		more_text :'阅读更多',
		btn_dis : false
	},
	mounted:function(){
		//滚动条事件
		this.scrolls();
		this.baidu();
		//弹幕
	},
	methods:{
		//阅读全文
		seeArticle:function(id){
			location.href='article/'+id+'.html';
		},
		//标签搜索文章
		searchArticle:function(id){
			var mainContainer = $('#box'),
			scrollToContainer = mainContainer.find('#acticle');//滚动到指定位置
			//动画效果
			mainContainer.animate({
				scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
			}, 1000);//2秒滑动到指定位置
			this.badge_id = id;
			var where = this.badge_id ? {page : 1,badge :this.badge_id} : {page : 1};
			this.getArticles(where);
		},
		//分页
		handleSizeChange:function(){
			if(this.list.article.current_page >= this.list.article.last_page){
				this.more_text='到底了~';
				this.btn_dis = true;
				return false;
			}
			var e = parseInt(this.list.article.current_page) + 1;
			var where = this.badge_id ? {page : 1,badge :this.badge_id} : {page : e};
			this.btn_load = true;
			this.getArticles(where,true);
		},
		//获取文章列表
		getArticles:function(where,state){
			this.article_load = true;
			var that = this;
			$.post('article_list.html',where,function(res){
				if(state) {
					that.list.article.current_page = res.msg.current_page;
					that.list.article.last_page = res.msg.last_page;
					var len = res.msg.data.length;
					for(var i = 0;i < len; i++) {
						that.list.article.data.push(res.msg.data[i]);
					}
				} else {
					that.list.article = res.msg;
				}
				that.btn_load = false;
				that.article_load = false;
			});
		},
		//百度推送
		baidu:function(){
			var bp = document.createElement('script');
		    var curProtocol = window.location.protocol.split(':')[0];
		    if (curProtocol === 'https'){
		    	bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
			}else{
				bp.src = 'http://push.zhanzhang.baidu.com/push.js';
			}
		    var s = document.getElementsByTagName("script")[0];
		    s.parentNode.insertBefore(bp, s);
		},
		//滚动条滚动事件
		scrolls:function(){
			var that = this;
			document.getElementById('box').onscroll= function(){
				//变量t是滚动条滚动时，距离顶部的距离
	            var t = document.getElementById('box').scrollTop;
				if(t > 10) {
					that.top_show = true;
					that.menu_index = 0;
				}else{
					that.top_show = false;
				}
				if(t > 200) {
					that.badge_show = true;
				}
				if(t >= (document.getElementById("acticle").offsetTop - 500)) {
					that.menu_index = 1;
					that.article_show = true;
				}
				if(t >= (document.getElementById("to-contact").offsetTop - 400)) {
					that.menu_index = 2;
				}
			}; 
		},

		//设置左边滚动栏
		setLeftBar:function(){
			this.bar_show = this.bar_show ? false : true;
		},
		//点击菜单
		linkMenu:function(key,boxid){
			this.menu_index = key;
			var mainContainer = $('#box'),
			scrollToContainer = mainContainer.find('#'+boxid);//滚动到指定位置
			//动画效果
			mainContainer.animate({
				scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
			}, 1000);//2秒滑动到指定位置
		},
		//回到顶部
		toTop:function(top){
			(function smoothscroll(){
			    var currentScroll = document.getElementById('box').scrollTop;
			    if (currentScroll > top) {
			    	window.requestAnimationFrame(smoothscroll);
			    	document.getElementById('box').scrollTo (0,currentScroll - (currentScroll/30));
			    }
			})();
		},
		//submit提交留言
		submit:function(formName){
			var that = this;
			this.$refs[formName].validate((valid) => {
	          	if (valid) {
	            	$.post('message.html',this.message,function(res){
	            		if(res.code) {
	            			window.localStorage.setItem('msg-user',that.message.user_name);
	            			window.localStorage.setItem('msg-email',that.message.email);
	            			that.message.content = '';
	            			toastSuccess(that,res.msg);
	            		} else {
	            			toastError(that,res.msg);
	            		}
	            	});
	          	} else {
	            	return false;
	          	}
	        });
		},
	}
});
</script>
</body>
</html>